<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>图片详情</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../plugins/mui/mui.min.css" rel="stylesheet" />
		<link href="../../css/life_housekeeper/snapshot_index.css" rel="stylesheet" />
		<script src="../../js/fontset.js" ></script>
		<script src="../../js/statistics.js"></script>
</head>
<body>
	<header class="mui-bar mui-bar-nav header">
	    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
	    <h1 class="mui-title">图片详情</h1>
	</header>
	<div class="mui-content deatail-content" id="container">
		<div class="mui-scroll">
			<div id="content">
				
			</div>
		</div>
	</div>
</body>
<script src="../../plugins/jquery/jquery-3.1.0.min.js"></script>
<script src="../../plugins/mui/mui.min.js" ></script>
<script src="../../plugins/mui/mui.zoom.js" ></script>
<script src="../../plugins/mui/mui.previewimage.js" ></script>
<script src="../../js/getApiToken.js"></script>
<script src="../../js/md5.js" ></script>
<script src="../../plugins/template/template.js"></script>
<script src="../../js/life_housekeeper/windowTitleView.js"></script>
<script type="text/html" id="contentTpl">
	<div id="slider" class="mui-slider" >
	  <div class="mui-slider-group mui-slider-loop">
	    <!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
	    {{if msg.img.length}}
	    <div class="mui-slider-item mui-slider-item-duplicate banner-item">
	    	<a href="#">
	    		<img src="{{baseUrl}}{{msg.img[0]}}" class="response-vw"> 
	    	</a> 
	    </div>
	    {{each msg.img as item i}}
	    <div class="mui-slider-item banner-item">
	    	<a href="#">
	    		<img src="{{baseUrl}}{{item}}" data-preview-src="" data-preview-group="1" class="response-vw">
	    	</a>		
	    </div>
	    {{/each}}
	    <!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
	    <div class="mui-slider-item mui-slider-item-duplicate banner-item">
	    	<a href="#">
	    		<img src="{{baseUrl}}{{msg.img[msg.img.length - 1]}}" class="response-vw"> 
	    	</a> 
	    </div>
	    {{/if}}
	  </div>
	  <div class="mui-slider-indicator">
	  	{{if msg.img.length}}
	  	{{each msg.img as item i}}
	  	{{if i == 0}}
	    <div class="mui-indicator mui-active"></div>
	    {{else}}
	    <div class="mui-indicator"></div>
	    {{/if}}
	    {{/each}}
	    {{/if}}
	  </div>
	</div>
	<div class="card">
		<div class="card-tit">
			<div class="tit-user">
				{{if userInfo.header}}
				{{if userInfo.header.indexOf('http://') == -1 && userInfo.header.indexOf('https://') == -1}}
		    	<img class="tit-img" src="{{baseUrl}}{{userInfo.header}}"/>
		    	{{else}}
		    	<img class="tit-img" src="{{userInfo.header}}"/>
		    	{{/if}} 
		    	{{/if}}
				<div class="tit-info">
					<span>{{userInfo.name}}</span>
					<p>{{msg.create_time}}</p>
				</div>
			</div>
			<div class="tit-like-status">
				{{if userInfo.userPraise == 2}}
				<div class="tit-dislike">
					<i class="icon"></i>
					<span>赞</span>
				</div>
				{{else}}
				<div class="tit-like">
					<i class="icon"></i>
					<span>已赞</span>
				</div>
				{{/if}}
			</div>
			
		</div>
		<div class="card-content">
			<h4>{{msg.content}}</h4>
			<p>拍摄地点：{{msg.address}}</p>
			<p>拍摄时间：{{msg.time}}</p>
			<p>图片浏览：{{msg.view}}次</p>
		</div>
	</div>
	<div class="card">
		<div class="card-tit">
			<div class="card-cell-tit">
				<span>点赞</span>
				<span>(<em>{{msg.praise}}</em>)</span>
			</div>	
		</div>
		<div class="user-list">
			{{each praise as cell j}}
			<div class="card-cell" data-id="{{cell.userid}}">
				{{if cell.header && cell.header.indexOf('http://') == -1 && cell.header.indexOf('https://') == -1}}
				<img class="cell-img" src="{{baseUrl}}{{cell.header}}"/>
				{{else}}
				<img class="cell-img" src="{{cell.header}}"/>
				{{/if}}
				<div class="cell-user">
					<span>{{cell.name}}</span>
					<p>{{cell.create_time}}</p>
				</div>
			</div>
			{{/each}}		
		</div>	
	</div>
</script>
<script type="text/html" id="cellTpl">
	{{each data as cell j}}
	<div class="card-cell" data-id="{{cell.userid}}">
		<img class="cell-img" src="{{baseUrl}}{{cell.header}}"/>
		<div class="cell-user">
			<span>{{cell.name}}</span>
			<p>{{cell.create_time}}</p>
		</div>
	</div>
	{{/each}}
</script>
<script type="text/javascript">
	mui.init({
	  	pullRefresh : {
	    	container:'#container',//待刷新区域标识，querySelector能定位的css选择器均可，比如：id、.class等
	    	up : {
		      	contentrefresh : "正在加载...",
		     	contentnomore:'没有更多数据了',
		     	callback : pullupRefresh
	    	}
	  	}
	});
	function pullupRefresh(){
		var _this= this,
			 _self = plus.webview.currentWebview(),
			id = _self.pageId,
		len = $('#content .card-cell').length;
		if(len < 6){
			mui('#container').pullRefresh().disablePullupToRefresh();
			return;
		}
		myAjax('home/snapshot/getMoreList','post',{id:id,length:len+''},function(e){
			var e = JSON.parse(e);
			//console.log(JSON.stringify(e));
			if(e.code == '1'){
				e.baseUrl = _baseUrl;
				var	cellHtml = template('cellTpl',e);
				$('.user-list').append(cellHtml);
				mui('#container').pullRefresh().endPullupToRefresh(e.data.length < 6);
			}else{
				mui('#container').pullRefresh().endPullupToRefresh(true);
			}
		})
	}
	
	
	mui.plusReady(function(){
		var _self = plus.webview.currentWebview(),
			id = _self.pageId,
			userid = _self.userId,
			sub = null;
			mui.previewImage();
		myAjax('home/snapshot/detail','post',{id:id,userid:userid},function(e){
			//console.log(JSON.stringify(e));
			var e = JSON.parse(e);
			if(e.code == '1'){
					data = e.data;
					data.baseUrl  = _baseUrl;
				var	contentHtml = template('contentTpl',data);
					document.getElementById("content").innerHTML = contentHtml;
					if(data.praise.length<6){
						mui('#container').pullRefresh().disablePullupToRefresh();
					}
					//获得slider插件对象
				var gallery = mui('.mui-slider');
				gallery.slider({
				  interval:0
				});	
			}else{
				mui('#container').pullRefresh().disablePullupToRefresh();
			}
		});
		
		//点赞
		mui('#content').on('tap','.tit-like-status',function(e){
			var $this = $(this),
				headimgUrl = plus.storage.getItem("cg_headimgurl"),
				nickName = plus.storage.getItem("cg_nickname");
				
			if($this.children().hasClass('tit-dislike')){
				myAjax('home/snapshot/praiseIn','post',{id:id,userid:userid},function(e){
					//console.log(JSON.stringify(e));
					var e = JSON.parse(e);
					//console.log($(".card .card-cell-tit em").text());
					if(e.code == 1){
						var num = parseInt($(".card .card-cell-tit em").text());
						num++;
						$(".card .card-cell-tit em").html(num);
						var userInfo = {
							data:[{
								userid:userid,
								header:headimgUrl,
								name:nickName,
								create_time:'刚刚赞过'
							}]
						},
						cellHtml = template('cellTpl',userInfo);
						$this.children().removeClass('tit-dislike').addClass('tit-like').children('span').html('已赞');
						$('.user-list').prepend(cellHtml);
						if(!sub){
							sub = plus.webview.getWebviewById('snapshot_sub.html');
						}
						mui.fire(sub,'likeStatus',{
						    
						});
					}
				})
			}else if($this.children().hasClass('tit-like')){
				myAjax('home/snapshot/praiseOut','post',{id:id,userid:userid},function(e){
					//console.log(JSON.stringify(e));
					var e = JSON.parse(e);
					if(e.code == 1){
						var num = parseInt($(".card .card-cell-tit em").text());
						num--;
						$(".card .card-cell-tit em").html(num);
						$this.children().removeClass('tit-like').addClass('tit-dislike').children('span').html('赞');	
						var removeId = userid;
						$(".card .card-cell").each(function(i){
							var $this = $(this),
							dataId = $this.attr('data-id');
							if(removeId == dataId){
								$this.remove();
							}
						})
						if(!sub){
							sub = plus.webview.getWebviewById('snapshot_sub.html');
						}
						mui.fire(sub,'likeStatus',{
						    
						});
					}
				})
			}
			
			
			
		})
		
	})
</script>
</html>
